<template>
  <div>
    <a-modal
      title="跟进列表"
      :visible="modalVisible"
      @cancel="modalVisible=false"
      :footer="null"
      width="1400px"
    >
      <div class="followUp" style="position:relative;">
        <a-tabs :default-active-key="1" @change="followUpChange">
          <a-tab-pane :key="1" tab="今日待跟进"></a-tab-pane>
          <a-tab-pane :key="2" tab="过去未完成"></a-tab-pane>
          <a-tab-pane :key="3" tab="过去已完成"></a-tab-pane>
          <a-tab-pane :key="4" tab="以后待跟进"></a-tab-pane>
        </a-tabs>
        <a-radio-group style="position:absolute;top:0;right:0;" v-model="queryParams.user_type">
          <a-radio-button :value="0">全部</a-radio-button>
          <a-radio-button :value="1">我跟进的</a-radio-button>
        </a-radio-group>
        <div class="followUpAlert">
          <span class="followUpAlert_span">
            未完成
            <span class="followUpNum">{{followUpCount.unComplete}}</span>
            条
          </span>
          <span class="followUpAlert_span">
            已完成
            <span class="followUpNum">{{followUpCount.complete}}</span>
            条
          </span>
        </div>
        <s-table
          ref="follow"
          size="default"
          :columns="columns"
          class="user_management_table"
          :data="loadData"
          :scroll="{  y: 300 }"
        >
          <span slot="action" slot-scope="text,record" v-if="record.is_complete!==1">
            <a @click="followUp(record)">跟进</a>
          </span>
          <span slot="action" v-else>
            <a disabled>已跟进</a>
          </span>
        </s-table>
        <a-modal
          :visible="creat_visible"
          title="添加跟进记录"
          @ok="sure"
          @cancel="creat_visible=false"
          :confirmLoading="btnLoading"
          :bodyStyle="{'max-height':'400px','overflow-y':'auto'}"
        >
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="跟进内容" prop="content">
              <a-textarea
                v-model="form.content"
                placeholder="请输入跟进内容"
                :maxLength="1000"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </a-form-model-item>
            <a-form-model-item label=" " :colon="false" style="margin-bottom:0;">
              <a-upload
                :before-upload="beforeUploadImg"
                list-type="picture-card"
                :file-list="fileList"
                :remove="removePic"
              >
                <div v-if="fileList.length < 9">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-model-item>
            <a-form-model-item label="下次跟进">
              <a-date-picker
                v-model="time"
                show-time
                format="YYYY-MM-DD HH:mm"
                placeholder="选择时间"
                @change="changeTime"
                :disabled-date="disabledDate"
              />
            </a-form-model-item>
          </a-form-model>
          <div class="lastFollow" v-if="lastInfo">
            <div class="title">上次跟进记录</div>
            <div class="userInfo">
              <span class="user" style="margin-right:15px;">
                <a-icon type="user" style="margin-right:10px;color:#ccc;" />
                <span v-if="lastInfo.user&&lastInfo.user.name"></span>
                <span v-else>--</span>
              </span>
              <!-- <span class="time">
            <a-icon type="clock-circle" style="margin-right:10px;color:#ccc;" />
              </span>-->
            </div>
            <div class="followUpContent">
              <span v-if="lastInfo.content">{{lastInfo.content}}</span>
              <span v-else>--</span>
            </div>
          </div>
        </a-modal>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import { uploadPic } from '@/api/login'
import { studentFollowAdd } from '@/api/student'
import {
  organTopCountData,
  toDoing,
  followUp,
  funnelChart,
  lineChart,
  ringChart,
  followUpCount
} from '@/api/dashboardCount'
export default {
  components: { STable },
  props: ['studentFileExpand'],
  name: 'followUpTableModal',
  data() {
    return {
      modalVisible: false,
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'student.name',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'student.main_phone',
          ellipsis: true
        },
        {
          title: '上次跟进内容',
          dataIndex: 'last.content',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '上次跟进人',
          dataIndex: 'last.user.name',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '时间安排',
          dataIndex: 'time',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      queryParams: {
        user_type: 0,
        type: 1,
        school_id: this.$store.state.user.school
      },
      followUpCount: {
        unComplete: 0,
        complete: 0
      },
      loadData: parameter => {
        return followUp(this.queryParams).then(res => {
          this.getCount()
          return res
        })
      },
      //添加跟进记录   model和数据
      fileList: [], //上传的资源  数组
      previewImage: '',
      previewVisible: false,
      time: null,
      creat_visible: false,
      lastInfo: null,
      studentID: null, //跟进学生的ID
      btnLoading: false, //确定按钮loading
      form: {
        follow_up_id: null,
        content: '',
        time: ''
      },
      rules: {
        content: [{ required: true, message: '请输入跟进内容', trigger: 'blur' }]
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    }
  },
  watch: {
    creat_visible(val) {
      if (val == false) {
        this.btnLoading = false
        this.form.time = null
        this.form.follow_up_id = null
        this.time = undefined
      }
    },
    'queryParams.user_type'() {
      this.$refs.follow.refresh(true)
    }
  },
  methods: {
    disabledDate(current) {
      return current && current < moment().startOf('day')
    },
    getCount() {
      followUpCount(
        Object.assign(this.queryParams, {
          student_type: this.studentFileExpand
        })
      ).then(res => {
        this.followUpCount.unComplete = res.unComplete
        this.followUpCount.complete = res.complete
      })
    },
    followUpChange(e) {
      this.queryParams.type = e
      this.$refs.follow.refresh(true)
    },
    showVisible() {
      this.getCount()
      this.modalVisible = true
    },
    //添加跟进记录
    followUp(e) {
      this.studentID = e.student.id
      this.lastInfo = e.last
      this.form.follow_up_id = e.id
      this.creat_visible = true
    },
    removePic(a) {
      this.fileList.forEach((item, index) => {
        if (item.uid == a.uid) {
          this.fileList.splice(index, 1)
        }
      })
    },
    changeTime(date, dateString) {
      this.form.time = dateString
    },
    beforeUploadImg(file) {
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif'
      //
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg/png图片格式！')
        return
      }
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('只能上传10MB以内的图片!')
        return
      }
      const _this = this
      const formData = new FormData()
      formData.append('file', file)
      formData.append('school_id', this.$store.state.user.school)
      this.btnLoading = true
      uploadPic(formData)
        .then(res => {
          this.fileList.push({
            name: res.path,
            uid: this.fileList.length + 1,
            url: res.url
          })
          this.btnLoading = false
        })
        .catch(err => {
          this.btnLoading = false
          this.$message.error(err.data.message || '上传失败，请稍后重试~')
        })
      return false
    },
    sure() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.form.follow_up_id) {
            this.btnLoading = true
            let params = JSON.parse(JSON.stringify(this.form))
            params.student_id = this.studentID
            params.img = []
            this.fileList.forEach(val => {
              params.img.push(val.url)
            })
            if (this.time) {
              params.next_time = this.time.format('YYYY-MM-DD HH:mm')
            }
            studentFollowAdd(params)
              .then(res => {
                this.$message.success('添加成功')
                this.getCount()
                this.$refs.follow.refresh()
                this.creat_visible = false
                this.btnLoading = false
              })
              .catch(err => {
                this.$message.error(err.data.message || '添加失败，请稍后重试')
                this.btnLoading = false
              })
          } else {
            this.$message.error('数据异常请刷新后重试~')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.followUpAlert {
  border: 1px solid #91d5ff;
  border-radius: 5px;
  height: 32px;
  padding: 0 16px;
  line-height: 32px;
  background: #e6f7ff;
  margin-bottom: 15px;
  .followUpAlert_span {
    display: inline-block;
    margin-right: 20px;
    .followUpNum {
      display: inline-block;
      margin: 0 5px;
      color: #000;
      font-weight: 500;
    }
  }
}
.lastFollow {
  padding: 0 16px 16px;
  border-radius: 4px;
  background: #fafafa;
  .title {
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
  }
  .userInfo {
    padding: 8px 0;
  }
}
.followUpAlert {
  border: 1px solid #91d5ff;
  border-radius: 5px;
  height: 32px;
  padding: 0 16px;
  line-height: 32px;
  background: #e6f7ff;
  margin-bottom: 15px;
  .followUpAlert_span {
    display: inline-block;
    margin-right: 20px;
    .followUpNum {
      display: inline-block;
      margin: 0 5px;
      color: #000;
      font-weight: 500;
    }
  }
}
</style>